<template>
  <el-dialog :visible.sync="value" :before-close="cancel">
    <template slot="title">
      编辑充值金额配置
    </template>
    <ModalWrapper>
      <el-form :model="form" ref="refForm" :rules="rules" label-width="180px">
        <el-form-item label="商户名">
          <div>{{form.channelName}}</div>
        </el-form-item>
        <el-form-item label="商户号">
          <div>{{form.merchantCode}}</div>
        </el-form-item>
        <el-form-item label="充值名称显示">
          <div>{{form.paymentName}}</div>
        </el-form-item>
        <el-form-item label="手续费配置" prop="feeRate">
          <el-col :span="11">
            <el-input-number
              v-model="form.feeRate"
              :min="0"
              :max="100"
              :precision="2"
              :controls="false"
              :style="{ width: '160px' }"
              class="global-input-number-left-view"
            >
            </el-input-number>
            <span>%</span>
          </el-col>
        </el-form-item>
        <el-form-item label="最大手续费金额" prop="maxFee">
          <el-col :span="11">
            <el-input-number
              v-model="form.maxFee"
              :min="0"
              :controls="false"
              :precision="2"
              :style="{ width: '160px' }"
              class="global-input-number-left-view"
            >
            </el-input-number>
            <span>元</span>
          </el-col>
        </el-form-item>
        <el-form-item label="充值上下限配置" prop="minAmount">
          <el-col :span="11" :offset="1" :pull="1">
            <el-form-item>
              <el-input-number
                v-model="form.minAmount"
                :min="0"
                :controls="false"
                :precision="2"
                :style="{ width: '160px' }"
                @change="handleAmount(true)"
                class="global-input-number-left-view"
              >
              </el-input-number>
              <span>元</span>
            </el-form-item>
          </el-col>
          <el-col :span="11" :offset="1" prop="maxAmount">
            <el-form-item>
              <el-input-number
                v-model="form.maxAmount"
                :min="0"
                :controls="false"
                :precision="2"
                :style="{ width: '160px' }"
                @change="handleAmount(false)"
                class="global-input-number-left-view"
              >
              </el-input-number>
              <span>元</span>
            </el-form-item>
          </el-col>
        </el-form-item>
        <!--<el-form-item
          label="快捷金额配置"
          v-if="showFastAmountList"
        >
          <el-col :span="11" :offset="1" :pull="1">
            <el-form-item prop="fastAmount.0">
              <el-input placeholder="元" v-model="form.fastAmount[0]">
                <template slot="append">元</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11" :offset="1">
            <el-form-item prop="fastAmount.1">
              <el-input placeholder="元" v-model="form.fastAmount[1]">
                <template slot="append">元</template>
              </el-input>
            </el-form-item>
          </el-col>
          <div style="display:flex;height: 15px;width: 100%;"></div>
          <el-col :span="11" :offset="1" :pull="1">
            <el-form-item prop="fastAmount.2">
              <el-input placeholder="元" v-model="form.fastAmount[2]">
                <template slot="append">元</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11" :offset="1">
            <el-form-item prop="fastAmount.3">
              <el-input placeholder="元" v-model="form.fastAmount[3]">
                <template slot="append">元</template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-form-item>-->
      </el-form>
    </ModalWrapper>
    <div slot="footer" class="dialog-footer">
      <el-button
        @click="cancel"
      >
        取 消
      </el-button>
      <el-button
        type="primary"
        :loading="loading"
        @click="doSave({action: 'saveForm', form: 'refForm'})"
      >
        确 定
      </el-button>
    </div>
  </el-dialog>
</template>

<script>

// services
import {
  addRechargeLimitSetting,
} from '@/services/api/recharge';

// mixins
import { form, factory, constsLabel } from '@/build';

// components
import ModalWrapper from '@/components/ModalWrapper/index';

export default {
  name: 'recharge-limit-setting-edit-dialog',
  props: {
    rowData: {
      type: Object,
      required: true,
      default: () => {},
    },
    value: {
      type: Boolean,
      default: true,
    },
    limitType: {
      type: Number,
    },
  },
  mixins: [form, factory, constsLabel],
  components: {
    ModalWrapper,
  },
  computed: {
    // showFastAmountList() {
    //   return !([1, 2, 3].includes(this.form.clientType));
    // },
  },
  methods: {
    // getFastAmountList() {
    //   const { fastAmountList = [] } = this.rowData;
    //   if (!(Array.isArray(fastAmountList) && fastAmountList.length)) return [];
    //   return fastAmountList;
    // },
    cancel() {
      this.$emit('input', false);
    },
    handleAmount(isMin = true) {
      const { minAmount, maxAmount } = this.form;
      if (minAmount < maxAmount) return;
      // handle mix
      if (isMin) {
        this.form.maxAmount = Number(minAmount) + 100;
        return;
      }
      // handle max
      this.form.minAmount = Number(maxAmount) - 100;
    },
  },
  data() {
    return {
      form: {
        clientType: null,
        userType: null,
        merchantId: null,
        paymentId: null,
        feeRate: null,
        maxFee: null,
        minAmount: null,
        maxAmount: null,
        ...this.rowData,
        // fastAmount: this.getFastAmountList(),
      },
      rules: {
        feeRate: [
          { required: true, message: '手续费配置不能为空' },
        ],
        maxFee: [
          { required: true, message: '最大手续费金额不能为空' },
          { validator: factory.getValidator('nonNegativeInteger'), trigger: 'change' },
        ],
        minAmount: [
          { required: true, message: '最小充值金额不能为空' },
        ],
        maxAmount: [
          { required: true, message: '最大充值金额不能为空' },
        ],
      },
    };
  },
  mounted() {
    this.bindSave(addRechargeLimitSetting, 'saveForm', 'form', {
      beforeSend: () => ({
        ...this.form,
        limitType: this.limitType,
      }),
      // const { fastAmount } = this.form;
      // fastAmount: fastAmount.length ? fastAmount.join(',') : '',
      afterSuccess: () => {
        this.$emit('input', false);
        this.$parent.gridSearch();
      },
    });
  },
};
</script>

<style scoped>
</style>
